<template>
  <a-card class="content" :bordered="false">
    <div class="table_caozuo">
      <template v-for="(item,index) in btn">
        <a-button
          :key="index"
          @click="handler(index)"
          v-if="item.isShow"
          type="primary"
        >{{item.title}}</a-button>
      </template>
      <!-- <span>{{ '已选择 '+number+' 项' }}</span>
      <a-button type="link" @click="clearSelection">清空</a-button>-->
    </div>
    <a-table
      rowKey="id"
      :columns="approvedColumns"
      :dataSource="loadData"
      :pagination="false"
      :loading="loading"
      :scroll="{ x:1720}"
    >
      <span slot="sex" slot-scope="text,record">
        <template>{{ record.sex | sex}}</template>
      </span>
      <span slot="state" slot-scope="text,record">
        <template>{{record.state | state}}</template>
      </span>
      <span slot="action" slot-scope="text,record">
        <template>
          <a-button type="link" @click="dpedit(record)">编辑</a-button>
        </template>
      </span>
    </a-table>
    <template>
      <div style="width:100%;position:relative;height:60px">
        <a-pagination
          show-quick-jumper
          show-size-changer
          v-model="page.current"
          :page-size-options="['10', '20', '30', '40', '50']"
          :total="page.total"
          :page-size.sync="page.size"
          @showSizeChange="onShowSizeChange"
          @change="onShowSizeChange"
          :show-total="total => `共 ${total} 条`"
          style="margin:2% 0;position:absolute;right:1%"
        />
      </div>
    </template>
    <a-modal
      :title="ruleForm.id?'编辑店员':'新增店员'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <!-- 基本信息 -->
        <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
          <span slot="title">基本信息</span>
          <el-row :gutter="10" slot="table">
            <el-col :xs="8">
              <el-form-item label="姓名：" prop="personName">
                <a-input placeholder="请输入姓名" v-model="ruleForm.personName" />
              </el-form-item>
            </el-col>
            <el-col :xs="8">
              <el-form-item label="性别：" prop="sex">
                <a-radio-group v-model="ruleForm.sex">
                  <a-radio :value="'00'">男</a-radio>
                  <a-radio :value="'01'">女</a-radio>
                </a-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="8">
              <el-form-item label="联系电话：" prop="phoneNum">
                <a-input placeholder="请输入联系电话：" v-model="ruleForm.phoneNum" />
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="8">
              <el-form-item label="佣金规则" prop="commissionId">
                <a-select v-model="ruleForm.commissionId" placeholder="请选择佣金规则" allowClear>
                  <a-select-option
                    v-for="item in fenrunList"
                    :key="item.status"
                    :value="item.status"
                  >{{item.text}}</a-select-option>
                </a-select>
              </el-form-item>
            </el-col> -->
            <el-col :xs="8">
              <el-form-item label="状态：" prop="state">
                <a-radio-group v-model="ruleForm.state">
                  <a-radio :value="'01'">提供服务</a-radio>
                  <a-radio :value="'00'">停止服务</a-radio>
                </a-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </com-title>
        <!-- 银行账号 -->
        <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
          <span slot="title">银行账号</span>
          <el-row :gutter="10" slot="table">
            <el-col :xs="8">
              <el-form-item label="账户户名：">
                <a-input placeholder="请输入账户户名：" v-model="ruleForm.bankCardAccount" />
              </el-form-item>
            </el-col>
            <el-col :xs="8">
              <el-form-item label="银行账号：">
                <a-input placeholder="请输入银行账号：" v-model="ruleForm.bankCardNo" />
              </el-form-item>
            </el-col>
            <el-col :xs="8">
              <el-form-item label="开户行：">
                <a-input placeholder="请输入开户行：" v-model="ruleForm.originalBank" />
              </el-form-item>
            </el-col>
          </el-row>
        </com-title>
      </el-form>
    </a-modal>
  </a-card>
</template>

<script src='./list_table.js'></script>

<style lang="less">
.content {
  & > .ant-card-body {
    padding: 0;
    padding-top: 8px;
  }
}
</style>